<template>
  <div>
    <c-title :hide="false" text="我要改价"></c-title>
    <div class="flex-col page">
      <div class="flex-col flex-1 group">
        <div class="flex-row items-center section_3">
          <img class="shrink-0 image_5" :src="goods.thumb" />
          <div class="flex-col flex-1 ml-9-5">
            <span class="font text_2">{{ goods.title }}</span>
            <div class="flex-row justify-between items-baseline mt-53">
              <span class="font_2 text_4">销量：{{ goods.virtual_sales }}</span>
              <div class="group_2">
                <span class="font_2 text_5">¥</span>
                <span class="text_3">{{ goods.price }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-col group_3">
          <span class="self-start font text_7">修改价格</span>
          <div class="flex-col justify-start items-start self-stretch section_4 mt-15">
            <div class="group_4">
              <input placeholder="请输入价格" class="input-price" v-model="price" />
            </div>
          </div>
        </div>
        <div class="flex-col justify-start items-center button text-wrapper" @click="submit"><span class="font text_10">确定</span></div>
      </div>
    </div>
  </div>
</template>

<script>
import changePriceController from "./changePriceController";

export default changePriceController;
</script>


<style lang="scss" rel="stylesheet/scss" scoped>
@import "../common/common.css";
 .ml-9-5 {
    margin-left: 10px;
  }
  .mt-53 {
    margin-top: 53px;
  }
  .mt-15 {
    margin-top: 15px;
  }
  
.page {
    background-color: #f3f5f6;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }
  .group {
    padding: 22px 15px 40px;
    overflow-y: auto;
  }
  .section_3 {
    padding: 23px 14px 27px;
    background-color: #ffffff;
    border-radius: 12px;
    background-image: url('https://shops.cg500.com/static/newimg/aa0738fe7de1cf354a3385f652d65f38.png');
  }
  .image_5 {
    border-radius: 4px;
    width: 100px;
    height: 100px;
  }
  .font {
    font-size: 15px;
    font-family: PingFang SC;
    line-height: 14px;
    font-weight: 500;
    color: #151515;
  }
  .text_2 {
    line-height: 15px;
    text-align: left;
  }
  .font_2 {
    font-size: 12px;
    font-family: PingFang SC;
    color: #e20b0b;
  }
  .text_4 {
    color: #888888;
    line-height: 12px;
  }
  .group_2 {
    line-height: 15px;
    height: 15px;
  }
  .text_5 {
    line-height: 9px;
  }
  .text_3 {
    color: #e20b0b;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 15px;
  }
  
  .group_3 {
    margin-top: 26px;
  }
  .text_7 {
    line-height: 15px;
  }
  .section_4 {
    padding: 22px 0;
    background-color: #ffffff;
    border-radius: 12px;
  }
  .group_4 {
    margin-left: 13px;
    line-height: 14px;
  }
  .input-price {
    border: none;
  }


  .button {
    // margin-top: 353px;
    position: fixed;
    left: 50%;
    bottom: 20px;
    width: 90%;
    transform: translateX(-50%);
  }
  .text-wrapper {
    padding: 17px 0;
    background-image: linear-gradient(0deg, #a7201c 0%, #af1f1b 100%);
    border-radius: 25px;
  }
  .text_10 {
    color: #f3f5f6;
  }
</style>